<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Point cloud monitor')"></h3>
    </template>
    
    <!-- 通道选择 -->
    <el-row :gutter="12">
      <el-col :span="24">
          <el-radio-group 
            class="full-width-radio-group"
            v-model="pointCloudMonitorStore.channel" 
            @change="onChannelChange"
            style="width: 100%;"
          >
            <el-radio-button 
              v-for="i in 12" 
              :key="i" 
              :value="i-1"
              :label="String.fromCharCode(64 + i)"
            ></el-radio-button>
          </el-radio-group>
      </el-col>
    </el-row>

    <!-- 画布 -->
    <el-row>
      <el-col :span="24">
        <canvas 
          ref="canvasRef" 
          class="point-cloud-canvas"
          @mousedown="handleMouseDown"
          @mousemove="handleMouseMove"
          @mouseup="handleMouseUp"
          @wheel="handleMouseWheel"
        ></canvas>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { usePointCloudMonitorStore } from '@/stores/pointCloudMonitor'
import { useLanguageStore } from '@/stores/language'

const pointCloudMonitorStore = usePointCloudMonitorStore()
const languageStore = useLanguageStore()
const canvasRef = ref(null)

// 翻译函数
const t = (key) => {
  const translations = {
    'Point cloud monitor': {
      'en': 'Point cloud monitor',
      'zh': '点云监控'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 通道变化处理函数
function onChannelChange(channel) {
  pointCloudMonitorStore.setChannel(channel)
}

// 鼠标事件处理函数
function handleMouseDown(e) {
  pointCloudMonitorStore.handleMouseDown(e)
}

function handleMouseMove(e) {
  pointCloudMonitorStore.handleMouseMove(e)
}

function handleMouseUp() {
  pointCloudMonitorStore.handleMouseUp()
}

function handleMouseWheel(e) {
  pointCloudMonitorStore.handleMouseWheel(e)
}

onMounted(() => {
  pointCloudMonitorStore.setCanvasRef(canvasRef.value)
})
</script>

<style scoped>
.point-cloud-canvas {
  width: 100%;
  height: 450px;
  background-color: var(--el-fill-color);
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
}
</style> 